<template>
  <label class="xtx-checkbox" @click.stop>
    <input type="checkbox" :checked="value" @change="change"/>
    <i class="iconfont icon-yixuanze"></i>
    <i class="iconfont icon-weixuanze"></i>
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </label>
</template>

<script>
export default {
  name: 'xtx-checkbox',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    change (e) {
      this.$emit('input', e.target.checked)
      this.$emit('change', e.target.checked)
    }
  }
}
</script>

<style scoped lang='less'>
.xtx-checkbox {
  color: #999;
  cursor: pointer;
  user-select: none;
  margin-right: 3px;
  margin-bottom: 2px;
}
.xtx-checkbox i {
  vertical-align: middle;
}
.xtx-checkbox i.icon-yixuanze {
  color: #27ba9b;
  display: none;
}
.xtx-checkbox i.icon-weixuanze {
  color: #999;
}
.xtx-checkbox span {
  vertical-align: middle;
  padding-left: 5px;
}
.xtx-checkbox input {
  display: none;
}
.xtx-checkbox input:checked ~ span {
  color: #27ba9b;
}
.xtx-checkbox input:checked ~ i.icon-yixuanze {
  display: inline-block;
}
.xtx-checkbox input:checked ~ i.icon-weixuanze {
  display: none;
}
</style>
